<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据报表（总部 ）</title>
  <link rel="stylesheet" href="../../mobile_static/css/element.css">
  <link rel="stylesheet" href="../../mobile_static/css/base.css">
  <link rel="stylesheet" href="../../mobile_static/css//dataReport/dataReport.css">
  <script src="../../mobile_static/js/vue.js"></script>
  <script src="../../mobile_static/js/axios.js"></script>
  <script src="../../mobile_static/js/jquery-1.10.2.min.js"></script>

</head>

<body>
  <div id="app">
    <div class="app-content">
      <!-- <div class="top-bar_right">
        <div class="selectBox">
          <p>全部</p>
        </div>
      </div> -->
      <!-- 周报 -->
      <div class="weekly">
        <div class="weekly-bar">
          <h2>周报</h2>
          <div class="date-box">
            <el-date-picker value-format="yyyy-MM-dd" v-model="weeklyTimeValue" @change="dateChange" type="daterange"
              unlink-panels range-separator="至" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期">
            </el-date-picker>
            <el-button type="primary" @click="download">下载</el-button>
          </div>
        </div>
        <div class="weekly-tableBox" v-loading="load1">
          <el-table :header-cell-style="{background: 'linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%)',color:'#3E3F42'}" :data="weeklyTableData" stripe style="width: 100%" border>
            <el-table-column prop="k0reg_user_cnt" label="平台注册数">
            </el-table-column>
            <el-table-column prop="k0user_cnt" label="总部及企业使用人数">
            </el-table-column>
            <el-table-column prop="k0login_cnt" label="移动端登录次数">
            </el-table-column>
            <el-table-column prop="k0avg_view_cnt" label="日均访问次数">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 月报 -->
      <div class="monthlyReport">
        <div class="title-bar">
          <h2>月报</h2>
          <div class="date-box">
            <el-date-picker value-format="yyyy-MM" v-model="monthlyReportTimeValue" @change="dateChange2" unlink-panels
              type="monthrange" range-separator="至" start-placeholder="请选择开始日期" end-placeholder="请选择结束日期">
            </el-date-picker>
            <el-button type="primary" @click="download2">下载</el-button>
          </div>
        </div>
        <!-- 月报数据切换 -->
        <div class="table-switch">
          <ul>
            <li :class="{'selected':isSelect === 1}" @click="isSelect = 1;">基础指标</li>
            <li :class="{'selected':isSelect === 2}" @click="isSelect = 2">总部使用情况</li>
            <li :class="{'selected':isSelect === 3}" @click="isSelect = 3">企业使用情况排行</li>
          </ul>
        </div>
        <div class="table-box">
          <!-- 基础指标表格 -->
          <el-table :header-cell-style="{background: 'linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%)',color:'#3E3F42'}" v-show="isSelect===1" :data="basicIndicatorsTableDate" stripe style="width: 100%" border
            height="100%" v-loading="load2">
            <el-table-column prop="g0accessmonth" label="月度">
            </el-table-column>
            <el-table-column prop="k0reg_user_cnt" label="平台注册用户数">
            </el-table-column>
            <el-table-column prop="k0bg_login_cnt" label="管理后台登录次数">
            </el-table-column>
            <el-table-column prop="k0user_cnt" label="总部及企业使用人数">
            </el-table-column>
            <el-table-column prop="k0login_cnt" label="移动端登录次数">
            </el-table-column>
            <el-table-column prop="k0avg_view_cnt" label="日均访问次数">
            </el-table-column>
          </el-table>
          <!-- 总部使用情况 -->
          <el-table v-show="isSelect===2" :data="headquartersUsageTableDate" :span-method="headquartersSpanMethod"
            stripe border height="100%" v-loading="load3">
            <el-table-column prop="g0accessmonth" label="月度">
            </el-table-column>
            <el-table-column prop="k0user_cnt" label="使用人数">
            </el-table-column>
            <el-table-column prop="k0login_cnt" label="登录次数">
            </el-table-column>
            <el-table-column prop="g0mdulename" label="工作台应用名称">
            </el-table-column>
            <el-table-column prop="k0view_cnt" label="访问量">
            </el-table-column>
          </el-table>
          <!-- 企业使用情况排行 -->
          <el-table v-show="isSelect===3" :data="enterpriseUsageTableDate" :span-method="enterpriseSpanMethod" stripe
            border height="100%" v-loading="load4">
            <el-table-column prop="g0accessmonth" label="月度">
            </el-table-column>
            <el-table-column prop="g0enterprise_name1" label="企业名称">
            </el-table-column>
            <el-table-column prop="k0login_cnt" label="登录次数">
            </el-table-column>
            <el-table-column prop="g0enterprise_name2" label="企业名称">
            </el-table-column>
            <el-table-column prop="k0user_cnt" label="使用人数">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../../mobile_static/js/element.js"></script>
<script type="module">
  import { getRowspanMethod } from "../../mobile_static/tool/getRowspanMethod.js"
  import { postFiveId, getFiveIdDownload, checkAllAuth } from '../../mobile_static/axios/axios.config.js'

  new Vue({
    el: "#app",
    data() {
      return {
        isSelect: 1,
        startDate: "2021-01-01",
        endDate: "2022-03-28",
        headquartersSpanMethod: "",
        enterpriseSpanMethod: "",
        weeklyTimeValue: "", //周报日期
        monthlyReportTimeValue: "",//月报日期
        weeklyTableData: [{
          k0reg_user_cnt: "",
          k0user_cnt: "",
          k0login_cnt: "",
          k0avg_view_cnt: ""
        }], //周报表格数据
        startDate2: "2021-01",
        endDate2: "2022-03",
        basicIndicatorsTableDate: [
        ], //基础指标表格数据
        headquartersUsageTableDate: [],
        enterpriseUsageTableDate: [],
        load1: true,
        load2: true,
        load3: true,
        load4: true,
        token: ''  
      }
    },
    created() {
      let nowDate = new Date();
      this.endDate2 = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth())}`
      this.startDate2 = `${nowDate.getFullYear() - 1}-${this.ZeroComplement(nowDate.getMonth() + 1)}`
      let date1 = new Date();
      //今天时间
      let date2 = new Date(date1);
      date2.setDate(date1.getDate() + -7);
      //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
      let time2 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate());
      this.startDate = time2
      this.endDate = `${date1.getFullYear()}-${this.ZeroComplement(date1.getMonth() + 1)}-${this.ZeroComplement(date1.getDate())-1}`
      this.weeklyTimeValue = [this.startDate,this.endDate]
      this.monthlyReportTimeValue = [this.startDate2,this.endDate2]
      //进入页面获取token做请求
      if (window.location.search) {
        this.token = window.location.search.slice(1).split("=")[1]
      } else {
        alert("页面访问失败")
        window.location.href = '../error/error.html'
      }
      checkAllAuth({
        identityToken: this.token,
        platformFlag: '1'
      }).then(res => {
        const response = JSON.parse(res.data.msg)
        if (response.status === '1') {
          this.RequestWeeklyReport()
          this.MonthlyReportIndicator()
          this.RequestHeadquartersUsage()
          this.RequestEnterpriseUsage()
        } else {
          alert("没有访问权限")
          window.location.href = '../error/error.html'
        }
      })
    },
    mounted() {
      $(window.parent.document).find("iframe").load(function () {
        var main = $(window.parent.document).find("iframe");
        var mainheight = $(document).height() + 30;
        main.height(document.querySelector('html').style.height.slice(0, -2) * 1);
      });
      // 表格合并
      // this.headquartersSpanMethod = getRowspanMethod(this.headquartersUsageTableDate, ['monthly', 'useNumber', 'loginNumber']);
      // this.enterpriseSpanMethod = getRowspanMethod(this.enterpriseUsageTableDate, ['monthly'])
    },

    methods: {
      //周报请求
      RequestWeeklyReport() {
        this.load1 = true
        postFiveId("zb00", {
          pageSize: 1000,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
        }).then(res => {
          this.load1 = false
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求周报数据成功");
          this.weeklyTableData = res.data
        })
      },
      //周报日期选择器改变重新请求数据
      dateChange() {
        if (this.weeklyTimeValue) {
          this.startDate = this.weeklyTimeValue[0]
          this.endDate = this.weeklyTimeValue[1]
        } else {
          let date1 = new Date();
          let date2 = new Date(date1);
          date2.setDate(date1.getDate() + -6);
          //num是正数表示之后的时间，num负数表示之前的时间，0表示今天
          let time2 = date2.getFullYear() + "-" + this.ZeroComplement(date2.getMonth() + 1) + "-" + this.ZeroComplement(date2.getDate());
          this.startDate = time2
          this.endDate = `${date1.getFullYear()}-${this.ZeroComplement(date1.getMonth() + 1)}-${this.ZeroComplement(date1.getDate())}`
        }

        this.RequestWeeklyReport()
      },
      //月报日期选择器改变重新请求数据
      dateChange2() {
        if (this.monthlyReportTimeValue) {
          this.startDate2 = this.monthlyReportTimeValue[0]
          this.endDate2 = this.monthlyReportTimeValue[1]
        } else {
          let nowDate = new Date();
          this.endDate2 = `${nowDate.getFullYear()}-${this.ZeroComplement(nowDate.getMonth() + 1)}`
          this.startDate2 = `${nowDate.getFullYear() - 1}-${this.ZeroComplement(nowDate.getMonth() + 1)}`
        }
        this.MonthlyReportIndicator()
        this.RequestHeadquartersUsage()
        this.RequestEnterpriseUsage()
      },
      //周报下载
      download() {
        this.load1 = true
        getFiveIdDownload("zb00Export", {
          pageSize: 1000,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
        }).then(res => {
          this.load1 = false
          if (!res) {
            return
          }
          let url = window.URL.createObjectURL(res.data)
          let link = document.createElement("a")
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', '周报.xlsx')
          document.body.appendChild(link)
          link.click()
        })
      },
      //月报基础指标请求
      MonthlyReportIndicator() {
        this.load2 = true
        postFiveId("yb_jczb00", {
          pageSize: 1000,
          pageNum: 1,
          startDate: this.startDate2,
          endDate: this.endDate2,
        }).then(res => {
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求月报基础指标数据成功");
          this.basicIndicatorsTableDate = res.data
          this.load2 = false
        })
      },
      //月报总部使用情况请求
      RequestHeadquartersUsage() {
        this.load3 = true
        postFiveId("yb_zbsyqk00", {
          pageSize: 1000,
          pageNum: 1,
          startDate: this.startDate2,
          endDate: this.endDate2,
        }).then(res => {
          res = JSON.parse(res.data.msg);
          console.log(res, "请求月报总部使用情况数据成功");
          this.headquartersUsageTableDate = res.data
          // let num;
          // let count;
          // for (let i = 0; i < this.headquartersUsageTableDate.length; i++) {
          //   num = 0
          //   count = 0
          //   for (let j = 0; j < this.headquartersUsageTableDate.length; j++) {
          //     if(this.headquartersUsageTableDate[i].g0accessmonth == this.headquartersUsageTableDate[j].g0accessmonth){
          //       num += this.headquartersUsageTableDate[j].k0user_cnt
          //       count += this.headquartersUsageTableDate[j].k0login_cnt
          //     }
          //   }
          //   this.headquartersUsageTableDate[i].k0user_cnt = num
          //   this.headquartersUsageTableDate[i].k0login_cnt = count
          // }
          // console.log(this.headquartersUsageTableDate);
          this.headquartersSpanMethod = getRowspanMethod(this.headquartersUsageTableDate, ['g0accessmonth', 'k0user_cnt', 'k0login_cnt']);
          this.load3 = false

        })
      },
      //月报企业使用情况请求
      RequestEnterpriseUsage() {
        this.load4 = true
        postFiveId("yb_qysyqkph00", {
          pageSize: 1000,
          pageNum: 1,
          startDate: this.startDate2,
          endDate: this.endDate2,
        }).then(res => {
          res = JSON.parse(res.data.msg);
          // console.log(res, "请求月报企业使用情况数据成功");
          this.enterpriseUsageTableDate = res.data
          this.enterpriseSpanMethod = getRowspanMethod(this.enterpriseUsageTableDate, ['g0accessmonth'])
          this.load4 = false
        })
      },
      //月报下载
      download2() {
        this.load2 = true
        if (this.isSelect === 1) {
          getFiveIdDownload("yb_jczb00Export", {
            pageSize: 1000,
            pageNum: 1,
            startDate: this.startDate2,
            endDate: this.endDate2,
          }).then(res => {
            if (!res) {
              return
            }
            let url = window.URL.createObjectURL(res.data)
            let link = document.createElement("a")
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '基础指标.xlsx')
            document.body.appendChild(link)
            link.click()
            this.load2 = false
          })
        } else if (this.isSelect === 2) {
          getFiveIdDownload("yb_zbsyqk00Export", {
            pageSize: 1000,
            pageNum: 1,
            startDate: this.startDate2,
            endDate: this.endDate2,
          }).then(res => {
            if (!res) {
              return
            }
            let url = window.URL.createObjectURL(res.data)
            let link = document.createElement("a")
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '总部使用情况.xlsx')
            document.body.appendChild(link)
            link.click()
            this.load2 = false
          })
        } else {
          getFiveIdDownload("yb_qysyqkph00Export", {
            pageSize: 1000,
            pageNum: 1,
            startDate: this.startDate2,
            endDate: this.endDate2,
          }).then(res => {
            if (!res) {
              return
            }
            let url = window.URL.createObjectURL(res.data)
            let link = document.createElement("a")
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '企业使用情况排行.xlsx')
            document.body.appendChild(link)
            link.click()
            this.load2 = false
          })
        }
      },
      //补零函数
      ZeroComplement(num) {
        if (num < 10) {
          return "0" + num;
        } else {
          return num;
        }
      }
    },
  })
</script>